<script setup lang="ts">
import { ref, onMounted } from "vue";
import { listAqiGrades } from "@/api/aqiGrade";
import { createAqiFeedback } from "@/api/feedback";
import { useFeedbackInfoStoreHook } from "@/store/modules/feedbackInfo";
import { useRouter } from "vue-router";
import recycle from "@/assets/register/elephants.png";
import "plus-pro-components/es/components/form/style/css";
import { type PlusColumn, PlusForm } from "plus-pro-components";
defineOptions({
  name: "SelectAqi"
});

const tableData = ref([]);

const router = useRouter();

const state = ref({
  fbTime: new Date().toString()
});

// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
    default:
      return "";
  }
};

const rules = {
  fbAddress: [
    {
      required: true,
      message: "请输入具体名称"
    }
  ]
};

/**列出所有AQI等级 */
const getAqiGrades = async () => {
  const { data } = await listAqiGrades();
  tableData.value = data;
  console.log(data);
};

const columns = ref([
  {
    label: "空气质量指数等级",
    prop: "aqiLevel",
    slot: "aqi"
  },
  {
    label: "空气质量指数等级描述",
    prop: "aqiLevelDes"
  },
  {
    label: "对健康影响程度",
    prop: "aqiHealthImpact"
  }
]);

const models = ref([
  {
    label: "请预估当前空气质量指数等级",
    labelWidth: 100,
    prop: "fbAqiLevel",
    valueType: "radio",
    options: [
      {
        label: "一",
        value: 1
      },
      {
        label: "二",
        value: 2
      },
      {
        label: "三",
        value: 3
      },
      {
        label: "四",
        value: 4
      },
      {
        label: "五",
        value: 5
      },
      {
        label: "六",
        value: 6
      }
    ]
  },
  {
    label: "请填写反馈信息",
    labelWidth: 100,
    prop: "fbInfo",
    valueType: "textarea"
  }
]);

onMounted(() => {
  getAqiGrades();
  console.log(useFeedbackInfoStoreHook());
});

const handleChange = (values: any, prop: PlusColumn) => {
  console.log(values, prop, "change");
};
const handleSubmit = async (values: any) => {
  console.log(values, "submit");
  const aqiFeedback = useFeedbackInfoStoreHook().aqiFeedback;
  aqiFeedback.fbAqiLevel = values.fbAqiLevel;
  aqiFeedback.fbInfo = values.fbInfo;
  aqiFeedback.fbTime = new Date();
  console.log(aqiFeedback);
  const result = await createAqiFeedback({ aqiFeedback });
  console.log(result, "result");
  if (result.code === 200) {
    router.push("/welcome/index");
  }
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
const handleReset = () => {
  console.log("handleReset");
};
</script>

<template>
  <el-card>
    <div class="container">
      <div class="table-container">
        <PureTable :data="tableData" :columns="columns" border>
          <template v-slot:aqi="scope">
            {{ convertLevelToChinese(scope.row.aqiLevel) }}
          </template>
        </PureTable>
      </div>
      <div class="form-container">
        <el-image
          :src="recycle"
          style="max-width: 100%; height: 300px; margin-right: 20px"
        />
        <PlusForm
          v-model="state"
          class="w-[450px] m-auto"
          :columns="models"
          :rules="rules"
          label-position="top"
          style="position: relative; bottom: 0; right: 0; margin: 20px"
          @change="handleChange"
          @submit="handleSubmit"
          @submit-error="handleSubmitError"
          @reset="handleReset"
        />
      </div></div
  ></el-card>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.table-container {
  width: 100%;
  margin-bottom: 20px;
}

.form-container {
  display: flex;
  align-items: center;
}
</style>
